Next 非常適合來架設 blog 網站， blog 網站裡面文章(post) 的網址(URL )是動態(dynamic) 的，例如：標題 "Hello World" 文章的位址(URL) 可以是 /blog/hello-world，標題 "My first post" 文章的位址(URL) 可以是 /blog/my-first-post。

blog 網站裡文章內容是變動的，Next 可以依據變動的網址(dynamic URL)，來處理 dynamic的內容。

在 Next 下，我們可以藉由[]建立一個動態(dynamic) 的網頁(page)，在再用這個網頁，來建立動態網址(dynamic URL)。

首先，新增一個 pages/blog/[id].js 檔案，這個檔案將會處理 /blog/ 下的所有動態網址。任何動態的內容都會放在檔名的[id]裡，而這個 id 會成為 Next router library 中 query property 的 id 參數(parameter)。

在 pages/blog/[id].js 檔案裡，import router，並建立一個 router object，然後，我們才能透過 router.query.id 取得 [id].js 裡URL的動態部分，動態網址(URL)，也可能是這樣 post-[id].js。

import { useRouter } from 'next/router'

const router = useRouter()   // instantiate the router object

pages/blog/[id].js 的內容如下：

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()
  
  return (
    <>
      <h1>Blog post 華國美學 超越藍綠</h1>
      <p>Post id: {router.query.id} </p>    // 謝謝stevelin666留言 這行原先有錯
      已修正 執行沒問題了
    </>
  )
}

打開瀏覽器，到 http://localhost:3000/blog/test 看結果，會看到如下畫面(重點以紅框表示)：

我們可以用 id，去取得一系列文章中的某一篇文章。
以 Json 檔案來說明，把文章放在專案根目錄中的 posts.json 檔案裡。posts.json 內容如下：

{
  "test": {
    "title": "test post",
    "content": "福興穀倉 鐵皮加蓋--彰化縣兩任女縣長執政下的文化局 接力把日本時代建築打造成華國美學建築"
  },
  "second": {
    "title": "福興穀倉 鐵皮加蓋 華國美學",
    "content": "Hey this is the second post content"
  }
}

修改 pages/blog/[id].js，內容如下：

import { useRouter } from 'next/router'
import posts from '../../posts.json'

export default () => {
  const router = useRouter()

  const post = posts[router.query.id]
  if (!post) return <p></p>
  
  return (
    <>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  )
}

會加上 if (!post) return ，是因為提交時(rendering)，元件被啟動，但資料還沒被讀進來。
打開瀏覽器，到 http://localhost:3000/blog/test 看結果：

將網址中的 test 改成 second，看第二篇文章內容：

http://localhost:3000/blog 下，列出文章，供讀者點選鏈結。
修改 blog.js 程式：

import Link from "next/link"
import posts from '../posts.json'

const Blog  = () => (
  <div>
    <h2>Blog</h2>
    <h1>Welcome to 福興穀倉 鐵皮加蓋</h1>
    <h1>欣賞彰化縣兩任女縣長綠營翁金珠 藍營王惠美執政下的文化局,</h1>
    <h1> 哪著全國人民納稅錢, 接力把日本時代建築打造成華國美學建築.</h1>

    <ul>
      {Object.entries(posts).map((value, index) => {
        return (
        <li key={index}>
          <Link href='/blog/[id]' as={'/blog/' + value[0]}>
            {value[1].title}
          </Link>
        </li>
        )
      })}
    </ul>
  </div>
)

export default Blog